<template>
  <div class="login-form-warp">
    <div
      class="flex-box justify-center align-center"
      style="margin-bottom: 20px"
    >
      <img src="../assets/logo.png" />
      <span class="title">{{ SYSTEM_TITLE }}</span>
    </div>
    <div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        class="login-loginForm"
      >
        <el-form-item prop="user">
          <el-input v-model="loginForm.user" :prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            :prefix-icon="Key"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" class="login-btn" @click="submitHandle">
        <span>登录</span>
      </el-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login-form-warp {
  position: absolute;
  top: calc(50% - 100px);
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 200px;
  padding: 16px;
  background: #f0f2f5;
  border-radius: 4px;
  box-shadow: 0px 0px 5px 5px #eee;
  &:hover {
    box-shadow: 0px 0px 5px 5px #e9e9e9;
  }
  img {
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }
  .title {
    font-size: 33px;
    font-weight: bold;
  }
  .login-btn {
    width: 100%;
  }
}
</style>
<script setup lang="ts">
import { User, Key } from "@element-plus/icons-vue";
import { SYSTEM_TITLE } from "@/config/global";
import { useLogin } from "@/hooks/login/useLogin";
const { rules, loginForm, loginFormRef, submitHandle } = useLogin();
</script>
